<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>教师信息管理</title>
    <link rel="stylesheet" href="../css/mdui.css">
    <link rel="stylesheet" href="../css/main.css">
</head>

<body class="mdui-appbar-with-toolbar mdui-drawer-body-left mdui-color-grey-50">

    <!-- 顶部导航栏 -->
    <header>
        <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-toolbar-hide">
            <div class="mdui-toolbar mdui-color-deep-purple">
                <a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-drawer="{target: '#left-drawer'}"><i class="mdui-icon material-icons">menu</i></a>
                <a href="../index.html" class="mdui-typo-title">操作系统学习平台</a>
                <div class="mdui-toolbar-spacer"></div>
                <!-- 登出按钮 -->
                <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content: '退出登录'}">
                                <i class="mdui-icon material-icons">exit_to_app</i>
                </span>

            </div>
        </div>
    </header>
    <!-- 顶部导航栏结束 -->
    <p><br></p>
    <article class="mdui-container mdui-clearfix">

        <div class="mdui-row mdui-m-b-2">
            <div class="mdui-col-md-3">
                <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-indigo" mdui-dialog="{target: '#add-user',modal:'true'}">新增用户</button>
                <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-red" mdui-tooltip="{content: '将禁用勾选的用户'}" mdui-dialog="{target: '#ban-user'}">禁用用户</button>
            </div>
            <!-- 查询框 -->
            <div class="mdui-col-md-2 mdui-col-offset-lg-5">
                <div class="mdui-textfield mdui-p-t-0">
                    <input class="mdui-textfield-input" type="text" placeholder="请输入教师姓名" />
                </div>
            </div>

            <div class="mdui-col-md-1">
                <select class="mdui-select" mdui-select>
                                <option value="1">已激活</option>
                                <option value="2">未激活</option>
                </select>
            </div>

            <div class="mdui-col-md-1">
                <button class="mdui-textfield-close mdui-btn mdui-ripple mdui-color-indigo mdui-btn-dense">查询</button>
            </div>
        </div>
        <!-- 新增用户对话框 -->
        <div class="mdui-dialog" id="add-user">
            <div class="mdui-dialog-title">新增用户</div>
            <div class="mdui-dialog-content">
                <div class="mdui-textfield mdui-textfield-floating-label">
                    <label class="mdui-textfield-label">教师工号</label>
                    <input class="mdui-textfield-input" type="text" required/>
                    <div class="mdui-textfield-error">此填写项不能为空</div>
                </div>
                <div class="mdui-textfield mdui-textfield-floating-label">
                    <label class="mdui-textfield-label">教师姓名</label>
                    <input class="mdui-textfield-input" type="text" required/>
                    <div class="mdui-textfield-error">此填写项不能为空</div>
                </div>
            </div>
            <div class="mdui-dialog-actions">
                <button class="mdui-btn mdui-ripple" mdui-dialog-close>取消</button>
                <button class="mdui-btn mdui-ripple">保存</button>
            </div>
        </div>
        <!-- 禁用用户对话框 -->
        <div class="mdui-dialog" id="ban-user">
            <div class="mdui-dialog-title">禁用用户</div>
            <div class="mdui-dialog-content">
                您确认要禁用勾选的用户吗？禁用后用户将不可登录。
            </div>
            <div class="mdui-dialog-actions">
                <button class="mdui-btn mdui-ripple" mdui-dialog-close>取消</button>
                <button class="mdui-btn mdui-ripple">确认</button>
            </div>
        </div>
        <div class="mdui-row">
            <div class="mdui-table-fluid">
                <table class="mdui-table mdui-table-selectable mdui-table-hoverable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>教师工号</th>
                            <th>教师姓名</th>
                            <th>所属院系</th>
                            <th>注册时间</th>
                            <th>最后登录时间</th>
                            <th class="mdui-text-center">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>91154</td>
                            <td>刘老师</td>
                            <td>计算机科学与技术</td>
                            <td>2019-5-4 20:22:13</td>
                            <td>2019-5-4 20:22:21</td>
                            <td>
                                <div class="mdui-btn-group">
                                    <button type="button" class="mdui-btn mdui-btn-dense mdui-ripple mdui-color-green-600" mdui-dialog="{target: '#change-user',modal:'true'}">
                                           修改
                                    </button>
                                    <button type="button" class="mdui-btn mdui-btn-dense mdui-ripple mdui-color-blue-grey">
                                        禁用
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>91065</td>
                            <td>王老师</td>
                            <td>物联网</td>
                            <td>2019-5-4 20:24:46</td>
                            <td>2019-5-4 20:24:53</td>
                            <td>
                                <div class="mdui-btn-group">
                                    <button type="button" class="mdui-btn mdui-btn-dense mdui-ripple mdui-color-blue-accent">
                                                激活
                                            </button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>91067</td>
                            <td>李老师</td>
                            <td>软件</td>
                            <td>2019-5-4 20:24:46</td>
                            <td>2019-5-4 20:24:53</td>
                            <td>
                                <div class="mdui-btn-group">
                                    <button type="button" class="mdui-btn mdui-btn-dense mdui-ripple mdui-color-green-600" mdui-dialog="{target: '#change-user',modal:'true'}">
                                                   修改
                                            </button>
                                    <button type="button" class="mdui-btn mdui-btn-dense mdui-ripple mdui-color-blue-grey">
                                                禁用
                                            </button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- 修改用户对话框 -->
            <div class="mdui-dialog" id="change-user">
                <div class="mdui-dialog-title">修改用户</div>
                <div class="mdui-dialog-content">
                    <div class="mdui-textfield mdui-textfield-floating-label">
                        <label class="mdui-textfield-label">教师工号</label>
                        <input class="mdui-textfield-input" type="text" required/>
                        <div class="mdui-textfield-error">此填写项不能为空</div>
                    </div>
                    <div class="mdui-textfield mdui-textfield-floating-label">
                        <label class="mdui-textfield-label">教师姓名</label>
                        <input class="mdui-textfield-input" type="text" required/>
                        <div class="mdui-textfield-error">此填写项不能为空</div>
                    </div>
                </div>
                <div class="mdui-dialog-actions">
                    <button class="mdui-btn mdui-ripple" mdui-dialog-close>取消</button>
                    <button class="mdui-btn mdui-ripple">保存</button>
                </div>
            </div>
        </div>

    </article>

    <!-- 左侧侧边栏 -->
    <aside>
        <!-- 抽屉栏 -->
        <nav class="mdui-drawer " id="left-drawer">
            <ul id="mdui-menu-left-list" mdui-collapse="{accordion: true}" class="mdui-list">
                <a href="./index.html">
                    <li class="mdui-list-item mdui-ripple">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-black-icon">home</i>
                        <div class=" mdui-list-item-content "> 首页 </div>
                    </li>
                </a>
                <a href="./student-info.html">
                    <li class="mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-black-icon">people</i>
                        <div class="mdui-list-item-content ">学生信息管理</div>
                    </li>
                </a>
                <a href="./teacher-info.html">
                    <li class="mdui-list-item mdui-ripple mdui-list-item-active">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-black-icon">person</i>
                        <div class="mdui-list-item-content ">教师信息管理</div>
                    </li>
                </a>

                <a href="./department.html">
                    <li class="mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-black-icon">assignment_ind</i>
                        <div class="mdui-list-item-content ">院系管理</div>
                    </li>
                </a>

                <a href="./grade.html">
                    <li class="mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-black-icon">view_week</i>
                        <div class="mdui-list-item-content ">年级管理</div>
                    </li>
                </a>

                <a href="./class.html">
                    <li class="mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-black-icon">map</i>
                        <div class="mdui-list-item-content ">班级管理</div>
                    </li>
                </a>

                <a href="./message.html">
                    <li class="mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-black-icon">mode_comment</i>
                        <div class="mdui-list-item-content ">留言管理</div>
                    </li>
                </a>
                <a href="./notice.html">
                    <li class="mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-black-icon">assignment</i>
                        <div class="mdui-list-item-content ">公告管理</div>
                    </li>
                </a>

            </ul>
        </nav>
    </aside>

    <!-- 底部页脚 -->
    <footer class="mdui-container-fluid mdui-text-center mdui-m-t-2">
        <div class="mdui-bottom-nav">
            <p class="mdui-ripple mdui-container-fluid mdui-valign">Copyright © 2019 北京交通大学海滨学院</p>
        </div>
    </footer>

    <script src="../js/mdui.js"></script>
</body>

</html>